<template>
  <t-table
    class="plugin-supplier-order-info-table"
    row-key="id"
    table-layout="auto"
    :data="data.goods"
    :columns="columns"
    hover
  >
    <template #name="{ row }">
      <b>{{ row.goods_name }}</b><br>
      {{ row.goods_code }}
    </template>
    <template #price="{ row }">
      {{ app.money.format(row.price) }}
    </template>
    <template #tax="{ row }">
      <t-tag theme="primary" variant="light">{{ Number(row.tax) }}%</t-tag>
    </template>
    <template #price_tax="{ row }">
      {{ app.money.format(row.price_tax) }}
    </template>
    <template #money="{ row }">
      {{ app.money.format(row.money) }}
    </template>
    <template #total="{ row }">
      {{ app.money.format(row.total) }}
    </template>
  </t-table>
</template>
<script setup>
  import app from '@/app'
  import index from '../../../index'

  const props = defineProps(['data'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('order.goods.name'),
    colKey: 'goods_name',
    cell: 'name',
    width: 150
  }, {
    title: plugin.t('order.goods.count'),
    colKey: 'count',
    align: 'center'
  }, {
    title: plugin.t('order.goods.price'),
    colKey: 'price',
    cell: 'price',
    align: 'center'
  }, {
    title: plugin.t('order.goods.tax'),
    colKey: 'tax',
    cell: 'tax',
    align: 'center'
  }, {
    title: plugin.t('order.goods.price_tax'),
    colKey: 'price_tax',
    cell: 'price_tax',
    align: 'center'
  }, {
    title: plugin.t('order.goods.money'),
    colKey: 'money',
    cell: 'money',
    align: 'center'
  }, {
    title: plugin.t('order.goods.total'),
    colKey: 'total',
    cell: 'total',
    align: 'center'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-supplier-order-info-table{
    .total{
      color: $color;
      font-weight: bold;
      text-align:center
    }
  }
</style>